<template>
  <div id="main">
    <el-row type="flex" justify="center">
      <el-col :span="18">
        <div class="img">
          <img v-bind:src="data.pictures[0]" class="good-img">
        </div>
        <div class="bottom">
          <el-row type="flex" align="middle">
            <el-col :span="12">
              <div class="good-seller-font text-hidden-single">{{data.goodName}}</div>
              <div class="good-font">￥{{data.price}}</div>
            </el-col>
            <el-col :span="12" class="adjustment-button">
              <el-button class="update-button" plain v-on:click="dialogVisible = true">修改</el-button>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
<!--    -->
    <el-dialog
      :append-to-body="true"
      :visible.sync="dialogVisible"
      >
      <el-row type="flex" justify="center">
        <el-col :span="20">
          <el-row class="dialog-box">
            <el-col :span="14">
              <div class="good-name-font">{{data.goodName}}</div>
              <div class="good-message-font">库存:&nbsp;{{data.stock}}</div>
              <div class="good-message-font">价格:&nbsp;￥{{data.price}}</div>
              <el-form>
                <el-row type="flex" align="middle">
                  <el-col :span="12">
                    <div class="good-message-font">{{form.freeze|isFreeze}}</div>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item>
                      <el-switch
                        @click.native="changeFrozenStateOfGoods"
                        v-model="form.freeze"
                        active-color="#B0E0E6"
                        inactive-color="#ff4949">
                      </el-switch>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row type="flex" align="middle">
                  <el-col :span="12">
                    <div class="good-message-font">{{form.online|isOnline}}</div>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item>
                      <el-switch
                        @click.native="goodsOffShelf"
                        v-model="form.online"
                        active-color="#B0E0E6"
                        inactive-color="#ff4949">
                      </el-switch>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-col>
            <el-col :span="10">
              <el-row type="flex" align="middle" justify="center">
                <div class="dialog-img-box">
                  <img :src="data.pictures[0]" class="dialog-img">
                </div>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "good_seller",
  props: {
    data: null,
    dataInit: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
     form: {
       freeze: null, //是否冻结
       online: null  //是否在售
     },
      dialogVisible: false //对话框是否可见
    }
  },
  methods: {
    changeFrozenStateOfGoods: function () {
      this.$api.seller.changeFrozenStateOfGoods({
        goodId: this.data.goodId
      }).then(res => {
        console.log("freeze", res);
        if (res.data.code === 200) {
          this.$message({
            message: "更改状态成功",
            type: "success"
          });
          this.dataInit();
        }
      })
    },
    goodsOffShelf: function () {
      this.$api.seller.goodsOffShelf({
        goodId: this.data.goodId,
        offShelfReason: "发人深省"
      }).then(res => {
        console.log("goodsOffShelf", res);
        if (res.data.code === 200) {
          this.$message({
            message: "更改状态成功",
            type: "success"
          });
          this.dataInit();
        }
      })
    },
    formDataInit: function () {
      this.form.freeze = this.data.freeze;
      this.form.online = this.data.online;
    }
  },
  filters: {
    isOnline: function (value) {
      if (value) {
        return "在售";
      } else {
        return "已下架";
      }
    },
    isFreeze: function (value) {
      if (value) {
        return "已冻结";
      } else {
        return "未冻结";
      }
    }
  },
  created() {
    this.formDataInit();
    // alert(JSON.stringify(this.data))
  }
}
</script>

<style lang="scss" scoped>
#main {
  width: 250px;
  height: 300px;
  display: inline-block;
  border: 1px solid grey;
  border-radius: 10px;
  margin: 0 10px 0 10px;
}
#main:hover {
  border: 1px solid #B0E0E6;
}
.img {
  width: 190px;
  height: 190px;
  margin: 0 auto;
}
.bottom {
  width: 250px;
  height: 30px;
  >>> .el-button--primary.is-plain {
    background: rgba(176, 224, 230, 1);
  }
}
.good-img {
  width: 180px;
  height: 180px;
  border-radius: 10px;
  margin-top: 10px
}
.good-font {
  left: 5%;
  font-size: 30px;
  color: rgba(255, 130, 71, 1)
}
.good-seller-font {
  padding-top: 20px;
  font-size: 28px;
  font-weight: bold;
}
.update-button {
  background: rgba(176, 224, 230, 0.8);
}
.update-button:hover {
  background: rgba(176, 224, 230, 0.4);
  border: 1px solid rgba(176, 224, 230, 1);
  color: rgba(28, 28, 28, 0.6);
}
.update-button:focus {
  background: rgba(176, 224, 230, 0.4);
  border: 1px solid rgba(176, 224, 230, 1);
  color: rgba(28, 28, 28, 0.6);
}
.adjustment-button {
  padding-top: 35px;
}
.text-hidden {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.text-hidden-single {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.good-name-font {
  color: rgba(28, 28, 28, 0.6);
  font-size: 28px;
  font-weight: bold;
  padding-bottom: 20px;
}
.good-message-font {
  color: #7D7D7D;
  font-size: 20px;
  font-weight: 500;
}
.adjustment-message-item {
  padding-top: 20px;
}
.dialog-img {
  width: 120px;
  height: 120px;
  border-radius: 20px;
}
.dialog-img-box {
  padding-left: 20px;
  padding-top: 50px;
}
.dialog-box {
  line-height: 35px;
}
>>> .el-button--primary.is-plain {
  font-size: 15px;
  font-weight: 500;
  color: rgba(28, 28, 28, 0.6);
}
>>> .el-dialog {
  width: 400px;
  border-radius: 25px;
  background: #F0FFFF;
}
>>> .el-dialog__body {
  padding: 5px 10px 15px 10px;
}
>>> .el-form-item {
  margin: 0;
}
</style>
